"use client";

import {FaGoogle,FaTwitter,FaWeixin,FaAlipay} from 'react-icons/fa'

export default function Page () {

  const iconList = [
    FaTwitter,
    FaGoogle,
    FaAlipay,
    FaWeixin,
  ]

  return (
   <div className={"h-screen p-20 bg-slate-800"}>
     <ul className={"p-5 w-fit mx-auto flex gap-x-5"}>
       {
         iconList.map( (Icon,index) => (
           <li className={"bg-slate-100 size-20 rounded-xl shadow-white/60 shadow-lg relative group overflow-hidden  hover:scale-105 cursor-pointer"} key={index}>
             <Icon className={"text-4xl size-1/2 inset-0 m-auto text-blue-500 absolute z-50 group-hover:text-white"}/>
             <span className={"absolute size-[120%] -left-[110%] top-[90%] bg-blue-500 rotate-45 group-hover:animate-move"}></span>
           </li>
         ))
       }
     </ul>
   </div>
  )
}
